﻿﻿<template>
  <div class='app-container'>
    <div class='button-container'>
      <el-button class='filter-item' type='primary' @click="refreshData">刷新</el-button>

    </div>
    <div>
      <!-- 表格 -->
      <el-table ref="nodeTable" class="table" :data="GridPageList" v-loading.lock="gridDataIsLoading"
                element-loading-text="数据加载中..." border fit highlight-current-row>
        <el-table-column align="center" label='#' width="150">
          <template slot-scope="scope">
            {{scope.$index + 1}}
          </template>
        </el-table-column>
        <el-table-column label="节点ID" width="240">
          <template slot-scope="scope">
            {{scope.row.nodeInfo.nodeid}}
          </template>
        </el-table-column>
        <el-table-column label="节点状态" width="200">
          <template slot-scope="scope">
            {{scope.row.nodeInfo.noderunstate}}
          </template>
        </el-table-column>
        <el-table-column label="节点名称" width="200">
          <template slot-scope="scope">
            {{scope.row.nodeInfo.nodename}}
          </template>
        </el-table-column>
        <el-table-column label="节点计算机名称" width="226">
          <template slot-scope="scope">
            {{scope.row.nodeInfo.nodepcname}}
          </template>
        </el-table-column>
        <el-table-column label="节点IP" width="150">
          <template slot-scope="scope">
            {{scope.row.nodeInfo.nodeip}}
          </template>
        </el-table-column>
        <el-table-column label="节点Mac" width="140">
          <template slot-scope="scope">
            {{scope.row.nodeInfo.nodemac}}
          </template>
        </el-table-column>
        <el-table-column label="节点说明" width="240">
          <template slot-scope="scope">
            {{scope.row.nodeInfo.noderemark}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button icon="edit" size="small" type="primary" @click="editNodeOpenDialog(scope.row)">完善信息</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div v-show="!gridDataIsLoading" class="pagination-container">
      <el-pagination @size-change="onPageSizeChanged" @current-change="onPageNoChanged"
                     :current-page.sync="paginationConfig.currentQueryPage" :page-sizes="[10,20,30, 50]"
                     :page-size="paginationConfig.selectedPageSize" layout="total, sizes, prev, pager, next, jumper"
                     :total="dataCount">
      </el-pagination>
      <el-dialog title='完善信息' :visible.sync='editNodeDislogOpened'>
        <el-form :model="editnode" ref="nodeform" :rules="rules" label-width="200px">
          <div>
            <el-form-item label='节点名称' prop="nodename">
              <el-input v-model='editnode.nodename' class="input"></el-input>
            </el-form-item>
            <el-form-item label='节点说明' prop="noderemark">
              <el-input v-model='editnode.noderemark' class="input"></el-input>
            </el-form-item>

          </div>
          <el-form-item>
            <el-button type='primary' @click="editNodeSubmit">确定</el-button>
            <el-button type='primary' @click="editNodecancel">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'node',
    data() {
      return {
        gridDataSource: [],
        // 当前分页数据开始index
        startIndex: 0,
        // 当前分页数据结束index
        endIndex: 0,
        gridDataIsLoading: false,
        paginationConfig: {selectedPageSize: 10, currentQueryPage: 0},
        editNodeDislogOpened: false,
        editnode: {
          nodeid: '',
          nodename: '',
          nodepcname: '',
          nodeip: '',
          nodemac: '',
          noderemark: ''
        },
        rules: {
          nodename: [
            {required: true, trigger: 'blur', message: '节点名称必填'}
          ],
          noderemark: [
            {required: true, trigger: 'blur', message: '节点说明必填'}
          ]
        }
      };
    },
    created() {
      this.refreshData();
    },
    methods: {
      /**
       * 刷新数据
       */
      refreshData() {
        this.gridDataIsLoading = true;

        let getNodes = this.$http.get('/TaskPlatform/Node/NodeAllInfo').then((response) => {
          if (response.data.isSuccess) {
            this.gridDataSource = response.data.nodeInfos;
            this.paginationConfig.currentQueryPage = 1;
          }
          this.paginationConfig.currentQueryPage = 0;
        });

        this.$http.all([getNodes]).then(() => {
          this.gridDataIsLoading = false;
        }).catch(() => {
          this.gridDataIsLoading = false;
        });
      },
      computeDataIndex(pageNo, pageSize) {
        this.startIndex = pageSize * (pageNo - 1) + 1;
        this.endIndex = this.startIndex + pageSize;
      },
      /**
       * 分页变化
       */
      onPageSizeChanged(size) {
        this.paginationConfig.selectedPageSize = size;
        this.computeDataIndex(this.paginationConfig.currentQueryPage, size);
      },
      onPageNoChanged(page) {
        this.paginationConfig.currentQueryPage = page;
        this.computeDataIndex(page, this.paginationConfig.selectedPageSize);
      },
      /**
       * 退出
       */
      quit() {
        this.$router.push({path: '/home/dashboard'});
      },
      /**
       * 保存完善信息
       */
      editNodeSubmit() {
        console.log(this.editnode.nodeid);
        this.$refs.nodeform.validate((valid) => {
          if (valid) {
            this.$http.post('/TaskPlatform/Node/SaveNodeInfo',
              {
                nodeid: this.editnode.nodeid,
                nodename: this.editnode.nodename,
                nodepcname: this.editnode.nodepcname,
                nodeip: this.editnode.nodeip,
                nodemac: this.editnode.nodemac,
                noderemark: this.editnode.noderemark
              }).then((response) => {
              if (response.data.isSuccess) {
                this.$message({
                  message: '操作成功!',
                  type: 'success'
                });
                if (response.data) {
                  this.gridDataSource.push(response.data.editnode);
                }
                this.editnode = {
                  nodename: '',
                  noderemark: ''
                };
                this.editNodeDislogOpened = false;
                this.refreshData();
              } else {
                this.$message({
                  message: '数据提交出现错误,请稍后重试!',
                  type: 'error'
                });
              }
            }).catch(() => {
              this.$message({
                message: '数据提交出现错误,请稍后重试!',
                type: 'error'
              });
            });
          } else {
            return false;
          }
        });
      },
      /**
       * 取消保存完善信息
       */
      editNodecancel() {
        this.editnode = {
          nodeid: '',
          noderunstate: '',
          nodename: '',
          nodepcname: '',
          nodeip: '',
          nodemac: '',
          noderemark: ''
        };
        this.editNodeDislogOpened = false;
      },
      /**
       * 完善信息
       */
      editNodeOpenDialog(row) {
        this.editnode.nodeid = row.nodeInfo.nodeid;
        this.editnode.nodename = row.nodeInfo.nodename;
        this.editnode.nodepcname = row.nodeInfo.nodepcname;
        this.editnode.nodeip = row.nodeInfo.nodeip;
        this.editnode.nodemac = row.nodeInfo.nodemac;
        this.editnode.noderemark = row.nodeInfo.noderemark;
        this.editNodeDislogOpened = true;
      }
    },
    computed: {
      GridPageList() {
        if (this.gridDataSource && this.gridDataSource.length > 0) {
          if (this.startIndex > 0 && this.endIndex > 0) {
            return this.gridDataSource.slice(this.startIndex - 1, this.endIndex - 1);
          } else {
            return [];
          }
        } else {
          return [];
        }
      },
      dataCount() {
        if (this.gridDataSource) {
          return this.gridDataSource.length;
        } else {
          return 0;
        }
      }
    }
  };
</script>
<style>
  .title {
    width: 100%;
    padding: 15px;
    border: 1px solid gray;
    margin: 0px;
    background: GhostWhite;
  }

  .drag-header {
    width: 100%;
    padding: 10px;
    border: 1px solid gray;
    margin: 0px;
  }

  .right {
    float: right;
    padding: 10px;
  }

  .set {
    float: right;
    padding: 1px;
  }

  .table {
    max-height: 700px;
    overflow: auto;
  }
</style>

